<template>
  <div>
    <header class="site-header jumbotron">
      <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <h1>请发表对React的评论</h1>
          </div>
        </div>
      </div>
    </header>
    <div class="container">
      <AddComment :addComment="addComment"/>
      <ShowComment :commentsData="commentsData" :delComment="delComment"/>
    </div>
  </div>
</template>

<script>
  import AddComment from "./components/AddComment";
  import ShowComment from "./components/ShowComment";
  
  export default {
    name: "App",
    components:
      {
        AddComment,
        ShowComment
      },
    data() {
      return {
        commentsData: [
          {id: 1, user: '大于', content: '听说下雨天巧克力和音乐更配哦~'}
        ]
      }
    },
    methods: {
      addComment(user, content) {
        this.commentsData.unshift({
          id: Date.now(),
          user, content
        })
      },
      delComment(id) {
        const newCommentData = this.commentsData.filter(item=>item.id !== id)
        this.commentsData = newCommentData
      }
    }
  }
</script>

<style scoped>

</style>